<template>
  <BaseDialog
    ref="dialogRef"
    :dialogTitle="title"
    :showDialogCancelButton="false"
    dialogConfirmButtonText="关闭"
    @dialogSubmit="dialogSubmit"
    :dialogBodyStyle="{ height: '50vh', overflow: 'auto' }"
    >>
    <template #dialog_body>
      <SysPermissionTree ref="treeRef" :data="tree" />
    </template>
  </BaseDialog>
</template>

<script lang="ts" setup>
import BaseDialog from '@/components/base/dialog/BaseDialogComponent.vue';
import SysPermissionTree from '@/components/auth/SysPermissionTreeComponent.vue';
import { defineExpose, ref } from 'vue';
import type { TreeData } from '@/types/interface/base_interface';
import Request from '@/api/request/request';
import urls from '@/api/request/urls';
import type { ResponseData } from '@/types/interface/base_interface';

const dialogRef = ref(); // 对话框ref对象
// 定义树形菜单的ref对象
const treeRef = ref();
const tree = ref<TreeData[]>([]); // 定义树形菜单
const title = ref<string>();
// 打开对话框，gong供父组件调用，传入表单对象
const openDialog = async (userId: number, isMenu: boolean) => {
  if (isMenu) {
    title.value = '菜单预览';
  } else {
    title.value = '权限预览';
  }
  // 获取树形权限
  const formObj = {
    // 封装要传递的表单数据
    isMenu
  };
  // 从服务端读取记录
  const resData: ResponseData = await new Request(
    `${urls.API_URL_BACKSTAGE_USER_PERMISSION.replace('{userId}', userId.toString())}`,
    formObj
  ).get();
  if (resData.success) {
    // 设置该角色的菜单值
    tree.value = resData.data;
  }
  // 打开对话框，先初始化树形菜单
  dialogRef.value!.openDialog();
};
// 关闭对话框
const dialogSubmit = () => {
  dialogRef.value!.closeDialog();
};
// 暴露组件给父容器使用
defineExpose({
  openDialog
});
</script>

<style scoped></style>
